<template>
	<view class="l-c-box">
		<!-- 左侧列表 -->
		<scroll-view class="l-c-left" scroll-y="true" :scroll-top="verticalNavTop" scroll-with-animation>
			<view class="l-c-left-list" v-for="(item, index) in lists" :key="index" @click="tapselect(index)">
				<!-- activeItem为选中状态 -->
				<view class="l-c-left-item" :class="{ activeItem: currentTab == index }">
					<label></label>
					<text>{{ item[leftTitleMap] }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 右侧列表 -->
		<scroll-view class="l-c-right" scroll-y="true" @scroll="mainScroll" :scroll-into-view="'l-c-' + mainCur"
			scroll-with-animation>
			<view v-for="(item, index) in lists" :key="index" :id="'l-c-' + index">
				<view class="l-c-right-title">
					<view class="line"></view>
					<text>{{ item[leftTitleMap] }}</text>
				</view>
				<view class="l-c-right-list">
					<view class="l-c-right-item" v-for="(c, cidx) in item[rightListMap]" :key="cidx"
						@click="itemClick(c)">
						<image :src="c[rightListImageMap]" :mode="imageMode"></image>
						<text>{{ c[rightListTitleMap] }}</text>
					</view>
				</view>
			</view>
			<view style="height: 50rpx"></view>
		</scroll-view>
	</view>
</template>

<script>
	/**
	 * DearyCateList 分类列表
	 * @description 用于展示分类列表
	 * @property {Array} lists 列表需要的数据对象
	 * @property {String} leftTitleMap 左侧列表的标题字段
	 * @property {String} rightListMap 右侧列表的字段
	 * @property {String} rightListTitleMap 右侧列表的标题字段
	 * @property {String} rightListImageMap 右侧列表的图片字段
	 * @property {String} imageMode 图片的展示模式
	 * @event {Function} click 点击事件 ，返回当前的事件对象
	 * @example <deary-l-c-list :lists="" @click=""></deary-l-c-list>
	 */
	export default {
		name: "DearyCateList",

		emits: ["click"],

		components: {},

		props: {
			lists: {
				type: Array,
				default () {
					return [];
				},
			},
			leftTitleMap: {
				type: String,
				default: "title",
			},
			rightListMap: {
				type: String,
				default: "list",
			},
			rightListTitleMap: {
				type: String,
				default: "title",
			},
			rightListImageMap: {
				type: String,
				default: "image",
			},
			imageMode: {
				type: String,
				default: "",
			},
		},

		data() {
			return {
				currentTab: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [{}],
			};
		},

		computed: {},

		watch: {},

		created() {},

		mounted() {
			this.getHeight();
		},

		destroyed() {},

		methods: {
			itemClick(item) {
				this.$emit("click", item);
			},
			//点击左侧按钮
			tapselect(index) {
				this.currentTab = index;
				this.mainCur = index;
				this.verticalNavTop = (index - 1) * 50;
			},
			//右侧滚动
			mainScroll(e) {
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.currentTab = i;
						this.verticalNavTop = (i - 1) * 50;
						return false;
					}
				}
			},
			//获取右侧每项的top和bottom,里面需获取对应dom元素的高度，所以只能在mounted生命周期里调用
			getHeight() {
				this.$nextTick(() => {
					let top = 0;
					let bottom = 0;
					let temp = 0;
					for (let i = 0; i < this.lists.length; i++) {
						let view = uni.createSelectorQuery().select("#l-c-" + i);
						view.fields({
							size: true,
						}, (data) => {
							top = temp;
							bottom = temp + (data && data.height || 0);
							this.list[i] = {
								top: top,
								bottom: bottom,
							};
							temp = bottom;
						}, ).exec();
					}
				})
			},
		},
	};
</script>

<style scoped>
	.l-c-box {
		/* position: absolute; */
		/* top: 0;
		bottom: 0; */
		background: #fff;
		width: 100%;
		display: flex;
	}

	.l-c-left {
		width: 200rpx;
		background: #f4f4f4;
		height: 100%;
	}

	.l-c-left-item {
		background: #f4f4f4;
		height: 50px;
		display: flex;
		align-items: center;
	}

	.l-c-left-item.activeItem {
		background: #fff;
	}

	.l-c-left-item label {
		width: 4rpx;
		height: 15px;
		float: left;
		background: #f4f4f4;
	}

	.l-c-left-item.activeItem label {
		background: #0bbbef;
	}

	.l-c-left-item text {
		width: 196rpx;
		font-size: 28rpx;
		display: block;
		text-align: center;
	}

	/* 右侧*/
	.l-c-right {
		flex: 1;
	}

	.l-c-right-title {
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
		line-height: 80rpx;
		position: relative;
	}

	.l-c-right-title .line {
		position: absolute;
		height: 2rpx;
		width: 300rpx;
		background: orange;
		top: 39rpx;
		left: 50%;
		margin-left: -150rpx;
	}

	.l-c-right-title text {
		background: #fff;
		padding: 0 10px;
		position: relative;
		color: #999;
	}

	.l-c-right-list {
		height: auto;
		overflow: hidden;
	}

	.l-c-right-item {
		width: 33.33%;
		float: left;
		margin-top: 20rpx;
	}

	.l-c-right-item image {
		width: 160rpx;
		height: 160rpx;
		display: block;
		margin: 0 auto;
	}

	.l-c-right-item text {
		display: block;
		text-align: center;
		font-size: 24rpx;
	}
</style>